import React,{useState} from 'react'
import "./index.css"
export default function Item({ todo, done }) {

  // 鼠标悬浮特效可以使用高亮来实现
  //1.在index.css中书写样式,给li定义一个active属性
  // 2.随着鼠标的移入移出,这个属性随之发生改变,从而实现悬浮效果
  // 3.在state中定义这个属性,给它一个初始值
  //4. isActive状态用来保存li的active类是否添加和按钮的display状态
  const [isActive,setIsActive]=useState(false)

  //鼠标移入时,active状态变为true
  const mouseEnterHandle = () => {
    setIsActive(true)
  }
  
  //鼠标移出li的事件函数
  const mouseLeaveHandle = () => {
    setIsActive(false);
  }
  return (
    <li onMouseEnter={mouseEnterHandle} onMouseLeave={mouseLeaveHandle} className={isActive ? "active" : ""}>
      <label>
        <input type="checkbox" checked={done} />
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" style={{ display:  isActive ? "block" : "none" }}>删除</button>
    </li>
  )
}
